<template>
    <div>
        <a-modal
            title="移除人员"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            cancelText="关闭"
            :width="1000"
            :dialog-style="{ top: '20px' }"
            class="candidate-modal-table-v"
        >
            <!-- <template slot="title">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button type="primary">确定</a-button>
                </div>
            </template> -->
            
            <commpVxeTable
                :key="manualKey"
                :isCanWrap="true"
                :config="manualdataTableConfig" 
                :columns="manualcolumnsVxe" 
                :formItem="manualformItem"
                @radioChange="radioChange"
                :assembleWidth="906"
                :prohibitSelection="{
                    key:'fgzzt',
                    value:'执行任务中',
                    type:'!='
                }"
                ref="acceptanceRegistrationRef"
            >
                <template v-slot:fgzdw_default="{row}" >
                    <span v-if="row.fsfyjsry == '是'" style="padding: 0 5px;background-color: #ff9200;color: #fff;border-radius: 5px;">药检</span>
                    {{ row.fgzdw }}
                </template>
                <template v-slot:fjcyxm_default="{row}">
                    <div >
                        <img v-if="row.fgzzt == '执行任务中'" style="position: absolute;top: 0px;left: -2px;height: 40px;width: 40px;" src="../../../assets/ybx-ryselect.png" alt="">
                        <span v-if="row.fgpk == '是'" style="padding: 0 5px;background-color: #1ab394;color: #fff;border-radius: 5px;">高频</span>
                        <span style="padding-right: 21;" v-if="row.fjcyxm && row.fjcyxm.length == 2">
                            <span v-for="(trem,tI) in row.fjcyxm.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.fjcyxm.split('').length">&nbsp;&nbsp;</span>
                            </span>
                        </span>
                        <span style="padding-right: 21;" v-else>{{ row.fjcyxm }}</span>
                    </div>
                    
                </template>
            </commpVxeTable>
            <!-- <a-modal v-model="qrsfVisible" title="确认抽选人员身份" @ok="qrsfHandleOk" :forceRender="true">
                <div style="display: flex;justify-content: center;">
                    <a-radio-group v-model:value="zdzysf" name="radioGroup" :key="zdzysfKey">
                        <a-radio value="组长">组长</a-radio>
                        <a-radio value="组员">组员</a-radio>
                    </a-radio-group>
                </div>
            </a-modal> -->
        </a-modal>
    </div>
</template>
<script>
import { sjxdaddSjxdXpry, } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            qrsfVisible:false,
            manualKey:null,
            manualformItem:[{
                label: '真实姓名',
                model: 'fjcyxm',
            },{
                label: '工作单位',
                model: 'fgzdw',
            },{
                label: '所属库',
                model: 'fssk',
                placeholder: '所属库',
                type:'Select',
                dictionaryType:'核查员所属库'
            },{
                label: '所属区域',
                model: 'fssqy',
            }],
            manualcolumnsVxe:[
            { 
                type: 'radio', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '真实姓名', //列头显示文字
                field: 'fjcyxm',
                fixed: 'left',
                slots: {
                    default:'fjcyxm_default',
                },
                width:123,
                // fgzzt 字段 = '执行任务中'
            },
            {
                title: '工作单位', //列头显示文字
                field: 'fgzdw',
                align:'left',
                slots: {
                    default:'fgzdw_default',
                },
            },
            {
                title: '所属库', //列头显示文字
                field: 'fssk',
                width:76,
            },{
                title: '所属区域', //列头显示文字
                field: 'fssqy',
                width:76,
            }
            ,{
                title: '擅长领域',
                field: 'fszly',
                align:'left'
            }
            ], 
            manualdataTableConfig:{
                api: assessCheckApi.sjxdqueryYcXpryList,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 370,
                paramet:{},
                isIdeaText:'',
                
            },
            selectArr:[],
            currentData:{},
            selectData:{},
            zdzysf:'组长',
            isEditFssk:false,
            zdzysfKey:null,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.currentData = val
            this.manualdataTableConfig.paramet={id:val.id}

            this.manualKey = Date.now()
        },
        radioChange(val){
            //console.log(val)
            this.selectData = val.row
        },
        handleOk(val){
            if(this.selectData.id){
                sjxdaddSjxdXpry({id:this.currentData.id,xzid:this.selectData.id,fxdlx:'移除'}).then(res=>{
                    if(res.code == 200){
                        this.$emit('successChange')
                        this.visible = false
                    }else{
                        this.$message.warning(res.message)
                        
                    }
                })
            }else{
                this.$message.warning('请选择人员')
            }
        }
    }
}
</script>
<style lang="less">
.candidate-modal-table-v{

}
</style>